<template>
  <el-form
    class="login-form"
    size="small"
    :rules="rules"
    ref="loginForm"
    :model="loginForm"
  >
    <el-form-item
      v-for="item in fileds"
      :label="showLabel ? item.label : ''"
      :key="item.prop"
      :prop="item.prop"
    >
      <el-input
        v-model="loginForm[item.prop]"
        :disabled="item.disabled"
        :type="item.type"
        :placeholder="item.placeholder"
      ></el-input>
    </el-form-item>
    <el-form-item v-if="showBtn">
      <el-button type="primary" @click="login">{{ btnCon }}</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
// import axios from "axios";

export default {
  props: {
    rules: {
      type: Object,
      required: true,
    },
    fileds: {
      type: Array,
      required: true,
    },
    showLabel: {
      type: Boolean,
      default: false,
    },
    btnCon: {
      type: String,
      default: "登录",
    },
    showBtn: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      loginForm: {},
    };
  },
  watch: {
    fileds: {
      deep: true,
      immediate: true,
      handler(val) {
        console.log(123);
        this.initForm(val);
      },
    },
  },
  methods: {
    //重置表单
    resetForm() {
      console.log("重置表单");
      this.$refs.loginForm.resetFields();
    },
    //初始化loiginForm
    initForm(val) {
      val.map((item) => {
        this.$set(this.loginForm, item.prop, item.value);
      });
    },
    //登陆方法
    login() {
      this.$refs["loginForm"].validate(async (valid) => {
        if (valid) {
          this.$emit("loginRequest", this.loginForm);
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="stylus">
.login-form
  width 300px
</style>
